<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件生命周期函数</title>
	<link rel="stylesheet" href="./libs/bootstrap.css">
</head>
<body>

	<div class="container"></div>
	
</body>
<script src="./libs/16.2.0/react.js"></script>
<script src="./libs/16.2.0/react-dom.js"></script>
<script src="./libs/16.2.0/babel.js"></script>
<script type="text/babel">

	//推荐使用此种方式(es6的方式)创建组件
	
	class App extends React.Component{

		constructor(props){
			super(props);
			this.state={
				title:props.title,
				style:{color:'#333'}
			}
		}

		
		//在渲染前自动调用(组件初始化的时候调用，只调用一次)
		componentWillMount(){
			console.log('componentWillMount触发了');
		}
		
		//在组件第一次渲染完毕时调用(组件初始化的时候调用,只调用一次)
		componentDidMount(){
			console.log('componentDidMount触发了');
		}
		
		//此函数需要返回一个布尔值，返回true则更新dom；返回false则不更新dom
		//并且componentWillUpdate、componentDidUpdate也不再执行
		shouldComponentUpdate(olState,newState){
			//console.log(arguments);
			if(olState.title==newState.title){
				//强制更新视图
				this.forceUpdate(function(){
					console.log('页面已被forceUpdate强制重新渲染');
				});
				return false;
			}
			return true;
		}
		
		//在state或props发生改变，但还没有被重新渲染到页面的时候调用(组件初始化的时候不调用，组件内部属性发生改变的时候调用，会调用多次)
		componentWillUpdate(){
			console.log('componentWillUpdate触发了');
		}
		
		//在state或props发生改变，并且已经被重新渲染到页面后调用(组件初始化的时候不调用；组件内部属性发生改变的时候调用，会调用多次)
		componentDidUpdate(){
			console.log('componentDidUpdate触发了');
		}


		//自定义方法：更新this.state.title
		changeTitle(){
			this.setState({
				title:'页面标题已更新',
				style:{
					color:'red',
					fontSize:40,
					fontWeight:700
				}
			});
		}


		render(){
			return <div>
				<h3 style={this.state.style}>{this.state.title}</h3>
				组件渲染完毕
				<button className="btn btn-primary" onClick={this.changeTitle.bind(this)}>修改默认标题</button>
			</div>
		}
	}
	

	ReactDOM.render(
		<App title="默认页面标题"/>,
		document.querySelector('.container')
	);
</script>
</html>